<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" type="text/css" href="../css/upload.css">
	</head>
	<style type="text/css">
	.getcode{
		font-size: 12px;
		color: #58d5f4;
		border: none;
		border-radius: 5px;
		padding:none;
		position: absolute;
		right: 0;
		bottom: 10px;
	}
	.getcode input{
		font-size: 12px;
		color: #58d5f4;
		border: 1px solid #58d5f4;
		border-radius: 5px;
		background: #fff;
		padding: 3px 5px;
	}
	.clearfix:after{
		content: '';
		display: block;
		clear: both;
	}
	.head_wrap{
		text-align: center;
	}
	.head_wrap span,.head_wrap div{
		float: left;
		text-align: center;
		width: 100%;
	}
	.head{
		width: 120px;
		height: 120px;
		border: 1px solid #ccc;
		border-radius: 100%;
		position: relative; 
		display: inline-block;
	}
	.head img{
		width: 100%;
		height: 100%;
		opacity: 0;
		border-radius: 100%;
		left: 0;
		top: 0;
		display: inline-block;
	}
	.head input{
		position: absolute;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
		z-index: 9999;
	}
	</style>
	<body>
		<form action="post" enctype="multipart/form-data">
		<a href="javascript:history.back(-1)" class="back"><img src="../img/back.png" height="18px"></a>
		<div class="center con">
			<p class="title">上传本人真实照片</p>
			<p class="prompt">五官清晰的照片，获得匹配的概率更高</p>
			<div class="head_wrap clearfix" style="margin-top:25px; ">
			<div class="head" style="width: 120px;margin: 0 auto;float: none;display: inline-block;">
				<img src="../img/photograph.png" height="120px">
				<input type="file" name="file">
			</div>
			</div>
			<p class="info"><img src="../img/report1.png" height="20px">尊敬的用户，您上传的头像须遵守相关法律法规和社区规则，请严格遵守相关规定，以免违规</p>
			<div class="hire center">完成进入</div>
		</div>
	</form>
	</body>
</html>
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/JS.js"></script>
<script>
	var array=[];
	$(".head").on("change", "input[type=file]", function() {
        $(this).prev().css("opacity","1")

        var filePath = $(this).val();//读取图片路径

        var fr = new FileReader();//创建new FileReader()对象
        var imgObj = this.files[0];//获取图片

        fr.readAsDataURL(imgObj);//将图片读取为DataURL
        var obj = $(this).prev()[0];//
        if(filePath.indexOf("jpg") != -1 || filePath.indexOf("JPG") != -1 || filePath.indexOf("PNG") != -1 || filePath.indexOf("png") != -1) {
            var arr = filePath.split('\\');
            var fileName = arr[arr.length - 1];

            $(this).parent().next().show();
            fr.onload = function() {
                obj.src = this.result;
            };
 			array.push($(this).get(0).files[0]);
        }
       
    });
    $('.hire').click(function(){
    	var formData= new FormData();
    	formData.append('img',array[0]);
		$.ajax({
			url: "/meiyou/modifyInfoimg",
			data:formData,
			type: "Post",
            cache: false,//上传文件无需缓存
            processData: false,//用于对data参数进行序列化处理 这里必须false
            contentType: false, //必须
            success: function (data) {
            	if(data.code==100){
				layer.msg(data.msg);
				window.location.href='login.html'
			}else{
				layer.msg(data.msg)
			}
            }
        })
    });
    </script>